<template>
	<view class="content">
		<view class="top ">
			<image mode="aspectFill" :src="imageUrl"></image>
		</view>
		<view class="bottom flex justify-between">
			<view class="left">
				<view class="title text-bold text-black">
					{{title}}
				</view>
				<view class="subtitle">
					{{subtitle}}
				</view>
				<view class="price">
					<text>￥</text>
					{{price}}
				</view>
			</view>
			<view class="right margin-top-sm flex align-center justify-center round">
				<u-icon name="shopping-cart" size="20"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goods-item",
		props: ["imageUrl", "title", "subtitle", "price"],
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 340rpx;
		height: 380rpx;

		// background-color: pink;
		.top {
			width: 100%;
			height: 70%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.bottom {
		.right {
			width: 50rpx;
			height: 50rpx;
			background-color: yellow;
		}
	}
</style>